<style scoped>
body{
 min-height: 1084px;
}
 .pro-list .bill_searchBox{
    padding: 0 30px;
    margin-bottom: 50px;
  }
 /* .pro-list .bill_searchBox .ivu-form-item{
    margin-bottom: 0;
}
.pro-list .bill_searchBox .ivu-col{
    padding-right: 0 !important;

} */
 .pro-list .success{
  font-size: 16px;
  color:white;
  height: 34px;
  padding-right: 0;
  margin-right: 0;
  
}
 .pro-list .xinzeng{
  height: 50px;
  box-sizing: border-box;
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 10px;
}
 .pro-list .xinzeng::after{
  content: "";
  display: block;
  clear: both;
}
 .pro-list .all{
  /* display: inline-block; */
  vertical-align: middle;
  font-size: 16px;
    color: #ef8412;
    font-weight: normal;
    margin-bottom: 20px;
}

 .pro-list .newadd{
  display: inline-block;
  vertical-align: bottom;
  float: right;
  right:0;
  text-align: right;
}

/*
*footer
*/
 .pro-list #footer{
      /* padding: 0 15px 0 0px; */
      padding: 0 30px;
      height: 80px;
      line-height: normal;
      position: fixed;
      bottom: 0;
      z-index:999;
      text-align: center;
      background-color: #FFF;
      box-shadow: -1px -3px 2px #E3E3E3;
      margin-right: 15px;
      right:0;
  }
  .pro-list  #footer .page{
        height: 36px;
        padding-right: 0;
        margin-right: 0;
    }
   .pro-list #footer .page .ivu-page-options{
        height: 36px !important;
    }
  .pro-list  #footer .page .ivu-page-options .ivu-page-options-sizer{
            height: 36px;
        }
  .pro-list .mb10{
  margin-bottom: 10px;
}
.pro-pagesize{
    margin-bottom:10px;

}
/* .bill_search .ivu-col{
    margin-bottom: 15px;
} */
  .pro-list .left{
    display: inline-block;
    float: left;
    font-size: 18px;
    color: #ef8412;
    font-weight: normal;
  }
  .pro-list .right{
    display: inline-block;
    float: right;
    border-radius: 2px;
    font-size: 16px;
    color: white;
  }
  .pro-list .cas .ivu-form-item{
       padding-right: 0px;
    }
  
 .iconfont {
    font-size: 14px;
}
@media  (max-width: 1200px) {
    .pro-list .cas .ivu-form-item{
       padding-right: 30px !important;
    }
 }
</style>
<style>

  .pro-list .sass .ivu-form-item-label{
    height: 36px;
  }
  .pro-list .ivu-row{
    margin-bottom:20px !important;
  }
  .pro-list .ivu-table-cell .jiao + span{
    font-size: 12px;
  }
  .pro-list  .ivu-table-cell .shang + span{
    font-size: 12px;
  }

  .pro-list  .shang {
    color: #fff;
    padding: 2px;
    margin-right: 5px;
    border-radius: 3px;
    background-color: #14a8f1;
  }
  .pro-list  .jiao {
    color: #fff;
    padding: 2px;
    margin-right: 5px;
    border-radius: 3px;
    background-color: #ea9405;
  }

 .pro-list th,td{
       text-align: center;
     }

.pro-list .right .ivu-btn i{
     vertical-align: middle;
     font-size:16px;
    }


</style>
<template>
    <div  class="pro-list" >
        <product-title></product-title>
        <div class="bill_searchBox">
            <!-- :label-width="120" -->
            <Row class="xinzeng">
                <div class="left">
                   快速搜索
                </div>
                <div class="right">
                      <Button type="success" @click="routerPush"  icon="icon iconfont  icon-weibiaoti3 f1" style="width:99px;height:36px;color:white;font-size:14px;border-radius:2px;">
                          新增
                      </Button>
                </div>
            </Row>
            <div class="common-box-body">
              <Form ref="formItem" :model="formItem" class=" bill_search ">
                  <Row >
                      <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                          <FormItem label="车牌号" prop="plateNo" ref="element" >
                              <i-input v-model="formItem.plateNo" placeholder="请输入"  ref="inp"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8" class="sass" style="padding-right:15px;">
                          <FormItem label="车架号" prop="vIN">
                              <i-input v-model="formItem.vIN" placeholder="请输入"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8"    class="cas sass" style="padding-right:0px;">
                          <FormItem label="投保单号" prop="ProposalNo">
                              <i-input v-model="formItem.ProposalNo" placeholder="请输入"></i-input>
                          </FormItem>
                      </i-col>
                    <i-col :md="24" :lg="8"  style="padding-right:15px;">
                          <FormItem label="业务员" prop="handlerName">
                              <i-input v-model="formItem.handlerName" placeholder="请输入"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8" style="padding-right:15px;">
                          <FormItem label="被保险人" prop="insured">
                              <i-input v-model="formItem.insured" placeholder="请输入"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8"  class="cas"  style="padding-right:0px;">
                          <FormItem label="被保人证件号" prop="insured_identifyNumber">
                              <i-input v-model="formItem.insured_identifyNumber" placeholder="请输入"></i-input>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8" style="padding-right:15px;">
                          <FormItem label="日期类型" prop="time_type">
                              <i-select v-model="formItem.time_type" >
                                  <Option value="validDate">起保日期</Option>
                                  <Option value="expiryDate">终保日期</Option>
                                  <Option value="productionDate">录单日期</Option>
                              </i-select>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8"  style="padding-right:15px;">
                          <FormItem label="开始日期">
                              <DatePicker type="date" placeholder="请选择日期" style="width:100%;"  @on-change="startChange"></DatePicker>
                          </FormItem>
                      </i-col>
                      <i-col :md="24" :lg="8"  class="cas"  style="padding-right:0px;">
                          <FormItem label="结束日期">
                              <DatePicker type="date" placeholder="请选择日期" style="width: 100%;"  @on-change="endChange"></DatePicker>
                          </FormItem>
                      </i-col>
                  </Row>
                  <Row>
                      <i-col :md="24" :lg="2" style="color: #2FB7F5;cursor: pointer;">
                          <div @click="moreChange">
                              <Icon type="arrow-up-b" v-if="moreshow"></Icon>
                              <Icon type="arrow-down-b" v-else></Icon>
                              更多查询条件
                          </div>
                      </i-col>
                      <i-col :md="24" :lg="{span:6,offset:16}" >
                         <i-button @click="reset" size="large"  icon="refresh" class="fr"   style="border-radius:2px;background-color:#77b4f5;color:#FFFFFF;width:99px;height:36px;font-size:14px;">重置</i-button>
                         <i-button @click="submit" size="large" type="info" class="fr"  icon="ios-search" style="border-radius:2px;float:right;color:#FFFFFF;margin-right:15px;width:99px;height:36px;font-size:14px;">搜索</i-button>
                      </i-col>
                  </Row>
              </Form>
            </div>
            <div style="padding:20px; border-top:1px dotted #EDEDED;">
                共{{total}}条&emsp;&emsp;总保费：0元&emsp;&emsp;净保费：0元&emsp;&emsp;车船税：0元
            </div>
            <i-table  ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe highlight-row border :columns="column1" :data="data1"></i-table>
           
            
        </div>
        <div id='footer'>
            <Row class="pro-pagesize"  >
              <Col  :md="24" :lg="10">
                  <Button class="fl mr10 " :disabled="tableaction" type="error" size="large"    @click="remove">删除</Button>
                  <!-- <Button class="fl mr10 " :disabled="tableaction" type="primary"  size="large"  >编辑</Button>
                  <Button class="fl mr10 " :disabled="tableaction" type="success" size="large"  >证件上传</Button> -->
              </Col>
              <Col :md="24" :lg="14" class="tRight">
                    <Page :page="p"  class="page" :page-size="pagesize" show-sizer show-total :total="total" @on-page-size-change="pageSizeChange" @on-change="pageChange" placement="top"></Page>
              </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle.vue";
import { car_policy_list } from "../../api/car";
export default {
  data() {
    return {
      tableaction:true,
      tableloading: true,
      current: {
        id: "",
        status: 1,
        name: ""
      },
      moreshow: true,
      formItem: {
        plateNo: "",
        vIN: "",
        PolicyNo: "", //保单号
        ProposalNo: "", //投保单号
        insured: "",
        handlerName: "",
        makeComName: "华农财产保险股份有限公司西华支公司",
        pagesize: 10,
        p: 1,
        insured_identifyNumber: "",
        time_type: "",
        time_start: "",
        time_end: ""
      },
      column1: [
        {
          key: "ProposalNo",
          title: "投保单号",
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  class: {
                    shang: params.row.policy_type == "商" ? "shang" : "",
                    jiao: params.row.policy_type == "交" ? "jiao" : ""
                  }
                },
                params.row.policy_type
              ),
              h(
                "span",
                {
                  style: {
                    color: "#6889BC",
                    cursor: "pointer"
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: "bill_update",
                        params: {
                          coustomer_mid: params.row.coustomer_mid,
                          agent_mid: params.row.agent_mid,
                          contractNo: params.row.contractNo
                        }
                      });
                    }
                  }
                },
                params.row.ProposalNo
              )
            ]);
          }
        },
        {
          key: "plateNo",
          title: "号牌号码"
        },
        {
          key: "coustomer_name",
          title: "被保险人姓名"
        },
        {
          key: "totalPremium",
          title: "保费"
        },
        {
          key: "validDate",
          title: "起保日期"
        },
        {
          key: "expiryDate",
          title: "终保日期"
        },
        {
          key: "agent_handlerName",
          title: "业务员"
        },
        {
          key: "status",
          title: "状态"
        }
      ],
      data1: [],
      total: 0,
      p: 1,
      pagesize: 10
    };
  },
  components: {
    productTitle
  },
  mounted() {
    this.$nextTick(function () {
            document.getElementById('footer').style.width = getComputedStyle(document.getElementsByClassName('pro-list')[0]).width;
        })
  },
  created() {
    this.get_list();
  },
  activated () {
    this.get_list();
  },
  methods: {
    // 点击新增跳转页面
    routerPush(){
      this.$router.push({'name':'bill_create'});
    },
    moreChange() {
      this.moreshow = !this.moreshow;
    },
    get_list() {
      new Promise((rev, rej) => {
        car_policy_list(this.formItem).then(res => {
          this.data1 = res.data.data.data;

          this.total = res.data.data.total_count;
        });
      });
    },
    pageSizeChange(value) {
      this.formItem.pagesize = value;
      this.get_list();
    },
    pageChange(value) {
      this.formItem.p = value;
      this.get_list();
    },
    submit() {
      this.get_list();
    },
    reset() {
      // this.$refs["item"].resetFields('对单独一项属性进行重置');  对name区域内的v-model值进行重置
      this.$refs["formItem"].resetFields();
    },
    startChange(value) {
      this.$nextTick(function() {
        this.formItem.time_start = value;
      });
    },
    endChange(value) {
      this.$nextTick(function() {
        this.formItem.time_end = value;
      });
    },
    //选中当前行数据
        tableCurrentChange(currentRow,oldCurrentRow){

            this.tableaction = false;
            this.current = currentRow;
            console.log(this.current)
//            this.current.id = currentRow._id
//            this.current.name = currentRow.name
//
//            this.current.status = currentRow.status == 1 ? true : false
            this.$set(this.current,'status',currentRow.status  == '上架' ? true : false)
//            console.log( this.current.status)
//            console.log(currentRow)
        },
    // 点击删除执行删除选中的table操作
    remove() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    var _param = {
                        mid:this.current._id
                    }
                    new Promise((resolve, reject) => {
                        car_policy_list(_param).then(response => {
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                this.getList();
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                },
            });
            
        },
  }
};
</script>




